import {
  ProjectOutlined,
  AppstoreOutlined,
  SettingOutlined,
  MailOutlined,
  CloseOutlined,
} from '@ant-design/icons'
import { Layout, ConfigProvider, Button } from 'antd'
import { Link } from 'react-router-dom'
import { useLocation } from 'react-router'
import './App.less'
import { useState } from 'react'
import nav from '@/assets/nav.png'
import left from '@/assets/left.png'
import right from '@/assets/right.png'
import bottom from '@/assets/bottom.png'
import { Menu } from 'antd'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
import { useEffect } from 'react'
import icon0 from '@/assets/icon.png'
import icon1 from '@/assets/icon1.png'
import fx from '@/assets/fx.png'
import gc from '@/assets/gc.png'
import sb from '@/assets/sb.png'
import xc from '@/assets/xc.png'
import xy from '@/assets/xy.png'
import zx from '@/assets/zx.png'

const { Content, Header, Sider } = Layout

function App(props) {
  const localtion = useLocation()
  const navigate = useNavigate()
  const items = [
    {
      label: '基础管理',
      key: 'base-config',
      children: [
        {
          label: '流程步配置',
          key: 'flow-step',
          icon: <img src={xc} />,
        },
        {
          label: '硬件配置',
          key: 'hardware',
          icon: <img src={sb} />,
        },
        {
          label: '协议配置',
          key: 'protocol',
          icon: <img src={xy} />,
        },
        {
          label: '观察者配置',
          key: 'observer',
          icon: <img src={gc} />,
        },
        {
          label: '总线配置',
          key: 'highway',
          icon: <img src={zx} />,
        },
        {
          label: '共享配置',
          key: 'share',
          icon: <img src={fx} />,
        },
        // {
        //   label: '流程项',
        //   key: 'flow-item',
        // },
      ],
    },
    {
      label: '库配置',
      key: '',
      children: [
        {
          label: '分支库',
          key: 'branch',
          icon: <img src={icon0} />,
        },
        {
          label: '用例库',
          key: 'test-case',
          icon: <img src={icon1} />,
        },
      ],
    },
    {
      label: '工程管理',
      key: 'project-manage',
    },
  ]
  let timer = null
  const [current, setCurrent] = useState('flow-step')
  const [time, setTime] = useState('')
  const onClick = ({ key, keyPath }) => {
    if (keyPath.length > 1) {
      navigate(`${keyPath[1]}/${keyPath[0]}`)
    } else {
      navigate(`/${keyPath[0]}`)
    }

    setCurrent(key)
  }

  const nowDateTime = () => {
    timer = setInterval(() => {
      const time = moment().format('YYYY年MM月DD日 HH:mm:ss')
      setTime(time)
    }, 1000)
  }

  useEffect(() => {
    nowDateTime()
    return () => {
      clearInterval(timer)
    }
  }, [])

  const onClose = () => {
    window.CloseCefWindow()
  }

  return (
    <Layout className="app-layout">
      <Header className="xflow-header">
        <div className="xflow-head-left"></div>
        <div className="xflow-title">测试用例管理单元</div>
        <div className="xflow-head-right">{time}</div>
        <img src={nav} alt="" />
        <Button
          className="close-window icon-btn"
          size="small"
          type="text"
          title="退出"
          icon={<CloseOutlined />}
          onClick={onClose}
        ></Button>
      </Header>
      <div className="xflow-menu">
        <Menu
          onClick={onClick}
          selectedKeys={[current]}
          mode="horizontal"
          items={items}
        />
      </div>
      <div className="xflow-left">
        <img src={left} alt="" />
      </div>
      <div
        style={{
          height: 'calc(100vh - 220px)',
          width: '96%',
          margin: '0 auto',
        }}
      >
        <Content style={{ height: '100%' }}>{props.children}</Content>
      </div>
      <div className="xflow-right">
        <img src={right} alt="" />
      </div>
      <div className="xflow-bottom">
        <img src={bottom} alt="" />
      </div>
    </Layout>
  )
}

export default App
